<template>
  <div id="registerPage">
    <van-nav-bar
        title="用户注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        style="border-bottom: 1px solid black"
    />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="userRegisterDTO.username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
          v-model="userRegisterDTO.userAccount"
          name="userAccount"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
          v-model="userRegisterDTO.userPassword"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="userRegisterDTO.checkPassword"
          type="password"
          name="checkPassword"
          label="确认密码"
          placeholder="请确认密码"
          :rules="[{ required: true, message: '请确认密码' }]"
      />
      <van-field
          v-model="userRegisterDTO.planetCode"
          name="planetCode"
          label="编码"
          placeholder="请输入编码，长度为1-5"
          :rules="[{ required: true, message: '请填写编码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        点击注册
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import myAxios from "@/plugins/myAxios.js";
import {Toast} from "vant";
const router = useRouter();
const userRegisterDTO = ref({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  planetCode: "",
  username: "",
})
const onClickLeft = () => history.back();
const onSubmit = async () => {
  // 发登录请求
  myAxios
      .post("/user/register", {
        ...userRegisterDTO.value
      })
      .then((res) => {
        if (res.data.code == 1) {
          Toast.success("注册成功");
          console.log("/user/register 注册成功");
          router.replace({
            path: "/login",
          });
        } else {
          Toast.fail("注册失败: " + res.data.msg);
          console.log("/user/register注册失败:" + res.data.msg);
        }
      })
};
</script>

<style scoped>
#registerPage {

}
</style>